<template>
  <view>
    <view class="header" :style="{'padding-top': statusHeight+25+'px'}">
      <view class="u-f-ac u-f-jsb">
        <view class="u-f-ac" @click="$u.route('/pages/member/info/info')">
          <image :src="res.avatar || '/static/33.jpg'" class="face"></image>
          <view>
            <view class="u-f-ac">
              <view class="texts">昵称：{{res.nickname || '游客'}}</view>
              <!-- <view class="ids">{{res.levelname}}</view> -->
              <!-- <view class="ids">{{res.pay_status}}</view> -->
            </view>
            <view class="texts">邀请码：{{res.yqm ||'当前用户无id'}}</view>
            <view class="lv">
              <image src="../../static/gate1.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;"
                v-show="res.level == 5"></image>
              <image src="../../static/gate2.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;"
                v-show="res.level == 6"></image>
              <image src="../../static/gate3.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;"
                v-show="res.level == 7"></image>
              <image src="../../static/gate4.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;"
                v-show="res.level == 8"></image>
              <image src="../../static/gate5.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;"
                v-show="res.level != 5 && res.level != 6 &&res.level != 7 &&res.level != 8"></image>
            </view>
            <!-- <view class="texts">下次签到日期：{{res.sign_time}}</view> -->
          </view>
        </view>
        <!-- <image src="/static/member/setting.png" style="width: 60rpx;height: 60rpx;"
          @click="$u.route('/pages/commission/qrcode/qrcode')"></image> -->
      </view>
    </view>

    <view class="shuju_box u-f-ac u-f-jsb f-w-w">
      <view class="shuju_item">
        <view class="u-f-ac u-f-jsb">
          <view style="width: 65%;">
            <view class="name">余额</view>
            <view class="number">
              {{res.credit2}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route(`/pages/member/details/lx/lx`)">明细
            </u-button>
          </view>
        </view>
        <view class="u-f-ac u-f-jsa" style="margin-top: 20rpx;">
          <view class="cz_btn tx_btn u-f-ajc" @click="$u.route('/pages/coin/recharge')">充值</view>
          <view class="cz_btn  u-f-ajc" @click="$u.route('/pages/commission/qrcode/vip')">提现</view>
        </view>

      </view>
      <view class="shuju_item">
        <view class="u-f-ac u-f-jsb">
          <view style="width: 65%;">
            <view class="name">冻结钱包</view>
            <view class="number">
              {{res.ywallet}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route('/pages/member/details/djz/djz')">明细
            </u-button>
          </view>
        </view>
        <view class="u-f-ac u-f-jsb shuju_items2">
          <view style="width: 65%;">
            <view class="name">提货券</view>
            <view class="number">
              {{res.tihuoquan}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route('/pages/member/details/djz/thq')">明细
            </u-button>
          </view>
        </view>
      </view>
      <view class="shuju_item">
        <view class="u-f-ac u-f-jsb">
          <view style="width: 65%;">
            <view class="name">易豆值</view>
            <view class="number">
              {{res.djbz}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route(`/pages/member/details/ydz/ydz`)">明细
            </u-button>
          </view>
        </view>
        <view class="u-f-ac u-f-jsb shuju_items2">
          <view style="width: 65%;">
            <view class="name">易豆</view>
            <view class="number">
              {{res.bz}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route('/pages/member/details/bz')">明细
            </u-button>
          </view>
        </view>
      </view>
      <view class="shuju_item">
        <view class="u-f-ac u-f-jsb">
          <view style="width: 65%;">
            <view class="name">易通值</view>
            <view class="number">
              {{res.djtzz}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route(`/pages/member/details/ytz/ytz`)">明细
            </u-button>
          </view>
        </view>
        <view class="u-f-ac u-f-jsb shuju_items2">
          <view style="width: 65%;">
            <view class="name">易通</view>
            <view class="number">
              {{res.tzz}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route(`/pages/member/details/tzz`)">明细
            </u-button>
          </view>
        </view>
      </view>
      <view class="shuju_item">
        <view class="u-f-ac u-f-jsb">
          <view style="width: 65%;">
            <view class="name">积分值</view>
            <view class="number">
              {{res.djjfz}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route(`/pages/member/details/jfz/jfz`)">明细
            </u-button>
          </view>
        </view>
        <view class="u-f-ac u-f-jsb shuju_items2">
          <view style="width: 65%;">
            <view class="name">积分</view>
            <view class="number">
              {{res.credit1}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route(`/pages/member/details/credit`)">明细
            </u-button>
          </view>
        </view>
      </view>
      <view class="shuju_item">
        <view class="u-f-ac u-f-jsb">
          <view style="width: 55%;">
            <view class="name">数字资产</view>
            <view class="number">
              {{res.fenhongzhi}}
            </view>
          </view>
          <view>
            <u-button size="mini" type="success" @click="$u.route(`/pages/member/details/djz/fhz`)">明细
            </u-button>
          </view>
        </view>
        <view class="u-f-ac u-f-jsb shuju_items2">
          <view style="width: 100%;">
            <view class="name">待开放</view>
            <view class="number">
            </view>
          </view>
          <view>
            <!-- <u-button size="mini" type="success" @click="get_my_buy_data">查看详情
            </u-button> -->
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="grid_box f-w-w u-f-ac">
        <view class="grid_item u-f-ajc u-f-column" v-for="(item, index) in userList" :key="index"
          @click="goDetail(item, index)">
          <image :src="item.icon" mode=""></image>
          <view>{{item.title}}</view>
        </view>
      </view>
    </view>


    <u-toast ref="uToast"></u-toast>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        tzz: '0',
        credit2: '0',
        bz: '0',
        a_kzp: '0',
        credit1: '0',
        nickname: '游客',
        avatar: '../../static/33.jpg',
        res: [],
        order: [{
          text: '待付款',
          icon: '../../static/456.png',
          src: '../order/order?index=1',
          badge: 0
        }, {
          text: '待发货',
          icon: '../../static/123.png',
          src: '../order/order?index=2',
          badge: 0
        }, {
          text: '待收货',
          icon: '../../static/111.png',
          src: '../order/order?index=3',
          badge: 0
        }, {
          text: '已完成',
          icon: '../../static/789.png',
          src: '../order/order?index=4',
          badge: 0
        }],
        userList: [{
            title: '会员资料',
            icon: '../../static/huiyuanziliao.png',
            path: '/pages/member/info/info'
          }, {
            title: '我的提货',
            icon: '../../static/huiyuanziliao.png',
            path: '/pages/order/order?index=0'
          },
          {
            title: '我的社区',
            icon: '../../static/guanzhuw.png',
            path: '/pages/member/favorite'
          },
          {
            title: '邀请函',
            icon: '../../static/menu_six.png',
            path: '/pages/commission/qrcode/invite_code'
          },
          {
            title: '银行卡绑定',
            icon: '../../static/menu5.png',
            path: '/pages/member/bankcard/bankcard'
          },
          {
            title: '实名认证',
            icon: '../../static/yhkbd.png',
            path: '/pages/member/verified/verified'
            // }, {
            //   title: '会员充值',
            //   icon: '../../static/004.png',
            //   path: '/pages/coin/recharge'
          },
          {
            title: '设置管理',
            icon: '../../static/jiedong.png',
            path: '/pages/commission/qrcode/qrcode'
          },
          {
            title: '地址管理',
            icon: '../../static/menu1.png',
            path: '/pages/member/address/address'
          },
          {
            title: '安全退出',
            icon: '/static/003.png',
            path: 'logout'
          },
          // {
          //   title: '我的大数据',
          //   icon: '../../static/dashujv.png',
          //   path: '../commission/qrcode/vip'
          // },
          // {
          //   title: '安全中心',
          //   icon: '../../static/003.png',
          //   path: 'no'
          // },
        ],
        is_realname: '',
        active: "active",
        openid: '',
        data: [],
      };
    },
    computed: {
      //状态栏高度
      statusHeight() {
        return uni.getSystemInfoSync().statusBarHeight || 10; //如果没有获取到高度，那么指定10px；
      }
    },
    onLoad: function() {
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    onNavigationBarButtonTap: function(e) {
      uni.navigateTo({
        url: 'info/info'
      });
    },
    methods: {
      goDetail(item, index) {
        if (item.path == 'logout') return this.logout()
        this.$u.route(item.path)
      },
      logout() {
        uni.showModal({
          content: "是否退出登录",
          confirmText: "确定",
          cancelText: "取消",
          success: res => {
            if (res.confirm) {
              uni.clearStorageSync()
              uni.reLaunch({
                url: '/pages/login/login'
              });
            }
          }
        })
      },

      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            // console.log(res)
            uni.hideLoading()
            this.res = res.data
            this.is_realname = res.data.is_realname
            var order = this.order
            for (var i in order) {
              this.order[i].badge = res.data.order[i]
            }
          },
          fail: () => {},
          complete: () => {}
        });
        // 浏览历史
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.history.get_list&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            this.data = res.data.result.list
            // console.log(this.data)
            uni.hideLoading()
          },
          fail: () => {},
          complete: () => {}
        });
      },
      jump(e) {
        // console.log(e)
        if (e.currentTarget.dataset.src == 'no') {
          this.jumpno()
        }
        uni.navigateTo({
          url: e.currentTarget.dataset.src
        });
      },
      jumpno() {
        uni.showModal({
          title: '提示',
          content: '功能即将开放',
          showCancel: false,
          confirmColor: "#DD524D",
          success() {
            return
          }
        })
      },
      jumptab(e) {
        uni.switchTab({
          url: e.currentTarget.dataset.src
        })
      },
      jumpcart(e) {
        // console.log('/pages'+e.currentTarget.dataset.src);return;
        uni.navigateTo({
          url: '/pages/cart/cart'
        });
      },
      jumpto() {
        uni.navigateTo({
          url: '/pages/commission/qrcode/invite_code'
        })
      },
      setup() {
        uni.navigateTo({
          url: './info/info'
        });
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F7F7F7;
  }

  .header {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx 30rpx;
    // background: linear-gradient(to bottom, #5B96D1, #74ccff);
    background-color: #05052B;
    color: #FFFFFF;
  }

  .header {
    .face {
      width: 120rpx;
      height: 120rpx;
      border-radius: 100%;
      margin-right: 20rpx;
    }

    .username {
      /* font-weight: 700; */
      font-size: 34rpx;
      color: #FFFFFF;
    }

    .ids {
      /* background: linear-gradient(90deg, #E85B4B 0%, #DA3928 100%); */
      background-color: #A0CFFF;
      border-radius: 20rpx;
      font-size: 20rpx;
      padding: 2rpx 10rpx;
      color: #FFF;
      margin-left: 20rpx;
    }

    .credit_num {
      color: #ffffff;
      font-weight: 700;
      font-size: 32rpx;
    }

    .credit_text {
      color: #ffffff;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }

  .shuju_box {
    width: 100%;
    background: #05052B;
    padding: 20rpx 30rpx 0;
    box-sizing: border-box;

    .shuju_item {
      width: 48%;
      height: 220rpx;
      // background-color: #fff;
      background: url(/static/126.jpg) no-repeat center center;
      // background-size: cover;
      color: #05052B;
      font-weight: 700;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;

      .shuju_items2 {
        margin-top: 10rpx;
      }

      .cz_btn {
        border-radius: 10rpx;
        width: 130rpx;
        height: 50rpx;
        background-color: #FC0301;
        color: #fff;
      }

      .tx_btn {
        background-color: #419480;
        margin-right: 20rpx;
      }
    }
  }

  .content {
    width: 100%;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .grid_box {
      width: 100%;
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0 0 10px 0 #05052B;



      .grid_item {
        width: 33.3%;
        height: 210rpx;
        border: 1px solid #eee;
        box-sizing: border-box;

        image {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }

  .texts {
    margin-bottom: 10rpx;
  }

  .table_list {
    padding: 10rpx 0;
  }
</style>
